<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件绑定</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="../../jsfile/layer.css"/>
    <script src="../../jsfile/jquery.js"></script>
    <script src="../../jsfile/layer.js"></script>
    <script src="../../jsfile/base.js"></script>
    <style>
        .head{
            padding: 10px;
            background: #009f95;
            width: 150px;
            text-align: center;
            color: white;
        }
    </style>

    <script type="text/javascript">
        $(function (){
            /*
            1.通常绑定事件的方式
            给元素绑定事件
            //jquery对象.事件方法(回调函数(){触发事件执行的代码}).事件方法(回调函数(){触发事件执行的代码})
            //绑定事件可以练市操作
             */
            //传function 是绑定对象
            // $("h5").click(function (){
            //     alert("h5单击事件 == click的方法绑定");
            // });

            $("<h5 class=\"head\">什么是jquery</h5>").appendTo($("#panel"));
            //使用on绑定的单击事件
            // $("h5").on("click" , function (){
            //     alert("h5单击事件 == on方法绑定");
            // });
            //
            // $("button").click(function (){
            //     $("h5").click();//不传function是触发事件
            // })
            //
            // //鼠标移入
            // $("h5").mouseover(function (){
            //     console.log("你进来了");
            // });
            //
            // //鼠标移出
            // $("h5").mouseout(function (){
            //     console.log("你出去了");
            // });

            //使用bind绑定事件
            //使用bind可以绑定多个事件
            // $("h5").bind("click mouseover mouseout" , function (){
            //     console.log("这是bind绑定事件");
            // });

            //one  只会执行一次的事件
            $("h5").one("click mouseover mouseout",function (){
                console.log("这是one绑定事件");
            })

            //卸载事件
            $("h5").unbind("click")



        })
    </script>

</head>
<body>
<p id="text_show">
    click() 它可以绑定单击事件,以及触发单击事件<br/>
    mouseover() 鼠标移入事件<br/>
    mouseout() 鼠标移出事件<br/>
    bind() 可以给元素一次性绑定多个事件<br/>
    one() 使用上跟Bind()一样,但是one方法绑定的事件只会响应一次<br/>
    unbind() 跟bind()方法相反的操作,解除事件的绑定<br/>
    live() 也是用来绑定事件,他可以用来绑定选择器匹配的所有元素,哪怕这个元素是后面动态创建出来的也有效果<br/>
</p>


<div id="panel">
    <h5 class="head">什么是jquery</h5>
    <div class="content">
        jQuery是继Prototype之后又一个优秀的JavaScript库，它是一个由 John Resig 创建于2006年1月的开源项目。jQuery凭借简洁的语法和跨平台的兼容性，极大地简化了JavaScript开发人员遍历HTML文档、操作DOM、处理事件、执行动画和开发Ajax。它独特而又优雅的代码风格改变了JavaScript程序员的设计思路和编写程序的方式。
    </div>
    <button>click button</button>
</div>

</body>
</html>